<template>
  <div style="background: #fff;">  
  	
  	
  	
  	<van-overlay :show="showOverlay" style="padding: 0 5%;" z-index="2">
  		 <img src="../../../static/image/22.png" alt="" style="display: block;width: 100%;"/> 		 
  	</van-overlay>
  	
  	<div class="selectOrder" @click="showPopup4=true">
  		<img src="../../../static/image/31.png" alt="" />
  	</div>
  	
  	<!--轮播区-->
  	<div class="swiper" style="position: relative;">
				<van-swipe :autoplay="10000000" indicator-color="#fff" @change="onChange">
				  <van-swipe-item v-for="(item,index) in swiperList" v-if="item.isVideo" :key="index">
				    <video-player  
				    	class="video-player vjs-custom-skin"
				      ref="videoPlayer"
				      :playsinline="true"
				      :options="playerOptions"
				    ></video-player> 
				  </van-swipe-item>
				  <van-swipe-item v-else>
				    <img :src="item.goodsImageUrl"/>
				  </van-swipe-item>	
				  
				  <template #indicator>
				    <div class="custom-indicator">
				      {{ current + 1 }}/{{swiperList.length}}
				    </div>
				  </template>						 
				</van-swipe>  	
				<div class="z" v-if="discountIsUsable==1">限时折扣</div>
  	</div>
  	<!--轮播区结束-->
  	
  	<!--有活动才显示-->
  	<div class="k" v-if="discountIsUsable==1">
  		  <div class="wrap">
	        <div class="k_1">
	        	<div>
	        		<span class="font1">￥</span>
	        		<span class="font2">{{formatPrice(1)}}.</span>
	        		<span class="font1">{{formatPrice(2)}} 起</span>        		
	        	</div>
	        	<div class="font3">￥{{formatPrice(3)}}.{{formatPrice(4)}}</div>
	        </div>
	        <div class="k_2">
	        	<div class="font4">距活动结束还剩余</div>
	        	<div>
	        		<span class="bg1">{{countDown.d}}</span>
	        		<span class="font5">天</span>
	        		<span class="bg1">{{countDown.h}}</span>
	        		<span class="font5">:</span>
	        		<span class="bg1">{{countDown.m}}</span>
	        		<span class="font5">:</span>
	        		<span class="bg1">{{countDown.s}}</span>
	        	</div>
	        </div>
        </div>
        <div style="color: #FF5746;font-size: 12px;background: rgba(255,255,255,.6);margin-top: 10px;padding: 5px 10px;border-radius: 3px;">
        	{{disType}}
        </div>
  	</div>  	
  	
  	<!--优惠券wrap-->
  	<div class="coupon_wrap" v-if="couponList">
  		<img src="../../../static/image/32.png" alt="" style="width: 100%;height: 40px;"/>
  		<div class="coupon">
  			  <div class="option_wrap">
  			  	<div class="option" v-for="(item,index) in couponList"  :key="index">{{item.activityName}}</div>
  			  </div>
  			  <div class="receive">
  			  	<span @click="showCoupon=true">领券</span>
  			  	<img src="../../../static/image/33.png" alt="" />
  			  </div>
  		</div>
  	</div>
  	
  	
  	
  	<!--价格区域-->
  	<div class="a">
  		<div class="a_1">
  			 <div class="a_1_1">
  			 	 <span class="red">￥</span>
	  			 <span class="red active">{{formatPrice(1)}}</span>
	  			 <span class="red">.</span>
	  			 <span class="red">{{formatPrice(2)}}</span>
  			   <span class="red" style="font-size: 12px;"> 起</span>
  			 </div>
  			 <div class="a_1_2" v-if="goodsInfo.showLine">
  			 	  <span>￥{{formatPrice(3)}}</span>
  			 	  <span>.</span>
  			 	  <span>{{formatPrice(4)}}</span> 
  			 	  <span style="font-size: 12px;"> 起</span>
  			 </div>
  		</div>
  		<div class="a_2" v-if="goodsInfo.goodsSales>0">{{goodsInfo.goodsSales}}人购买</div>
  	</div>

  	
  	<!--商品标题区-->
  	<div class="b">
  		 <div>
  		 	 <span class="tag" v-if="goodsInfo.isGoodsTagNew>0">新品</span>
  		 	 <span class="title">{{goodsInfo.goodsName}}</span>
  		 </div>
  		 
  		 <div class="ms">{{goodsInfo.shareIntro}}</div>
  	</div>
  	
  	<div class="c"></div>
  	
  	<!--商品福利、规格、地址区-->
  	<div class="d">
  		<div class="d_1" v-if="goodsInfo.isRebate>0||goodsInfo.points>0">
  			 <div class="font1">专享</div>
  			 <div class="d_1_2">
  			 	  <span class="bg bg1" v-if="goodsInfo.points>0">
  			 	  	<img src="../../../static/image/02.png" alt="" />
  			 	  	<span>{{formatPrice(6)}}</span>
  			 	  </span>  			 	
  			 	  <span class="bg bg2" v-if="goodsInfo.isRebate>0">
  			 	  	<img src="../../../static/image/01.png" alt="" />
  			 	  	<span>￥{{formatPrice(5)}}</span>
  			 	  </span>

  			 </div>
  		</div>
  		<div class="d_1" v-if="goodsInfo.isStock>0">
  			 <div class="font1">股权币</div>
  			 <div class="d_1_2">
  			 	  <span class="bg3">商家股权币 {{formatPrice(7)}}枚</span>
  			 </div>
  		</div>  	
  		
  		
  		<!--活动暂时不做-->
  		<!--<div class="d_1" v-if="hd">
  			 <div class="font1">活动</div>
  			 <div class="d_1_2">
  			 	  <span class="bg4" style="margin-right: 5px;">年终大促活动</span>
  			 	  <span class="bg4">买一赠一</span>
  			 </div>
  		</div>  -->
  		
  		
  		
  		<div class="d_1" @click="showSpecs=true">
  			 <div class="font1">规格</div>
  			 <div class="d_1_2">
  			 	  <span class="font2" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;">{{specTitle1}}</span>
  			 </div>
  			 <div class="isLink">
  			   	<van-icon name="arrow" color="#ccc" size="13" />
  			 </div>
  		</div>
  		
  		<div class="d_1" @click="showArea" style="border-bottom: none;">
  			 <div class="font1">配送</div>
  			 <div class="d_1_2">
  			 	  <span class="font2">{{areaTitle}}</span>
  			 	  <span class="font3" v-if="goodsInfo.allowSend>=0">{{formatPrice(10)}}</span>
  			 	  <span class="font3" v-if="this.goodsInfo.freight>=0">{{formatPrice(9)}}</span>
  			 </div>
  			 <div class="isLink">
  			   	<van-icon name="arrow" color="#ccc" size="13" />
  			 </div>
  		</div> 
  	</div>
  	
  	
  	
    <areaPopup ref="areaPopup" @computerFeight="computerFeight" @computerFeight2="computerFeight2" @needShowPopup3="showPopup3=true"></areaPopup>
  	
  	
  	<div class="c"></div>
  	
  	
  	<div class="e">
  		<!--<div class="e_1">
  			<img :src="goodsInfo.userForGoods.userBannerUrl" alt="" />
  		</div>-->
  		<div class="e_2">
  			<div class="font1">{{goodsInfo.userForGoods.nickName}}</div>
  			<div class="font2">在售商品{{goodsInfo.userForGoods.goodsTotal}}件</div>
  		</div>
  		<div class="e_3">
  			<van-icon name="arrow" color="#ccc" size="13" />
  		</div>
  	</div>
  	
  	<div class="f">
  		<div class="f_1" v-for="(item,index) in commitmentList" :key="index">
  			<img :src="item.commitmentImageUrl" alt="" />
  			<span class="word">{{item.commitmentName}}</span>
  		</div> 		
  	</div>
  	
  	
  	<div class="c"></div>
  	
  	
  	<div class="g">
  		<div class="wrap">
	  		<div class="g_1">
	  			<span>商品评价(</span>
	  			<span>{{goodsInfo.evaluateAll}}</span>
	  			<span>)</span>
	  		</div>
	  		<div class="g_2" @click="newWin">
	  			<span>查看全部</span>
	  			<van-icon name="arrow" color="#10B992" size="13" style="margin-left: 10px;"/>
	  		</div>
  		</div>
  	</div>
  	
  	
  	<div class="h" v-for="(item,index) in goodsInfo.evaluateList">
  		 <div class="wrap" :class="{active:index==goodsInfo.evaluateList.length-1}">
	  		 <div class="h_1">
		  		 	<div class="l">
		  		 		<img :src="item.memberAvatar" alt="" v-if="item.memberAvatar"/>
		  		 		<img src="../../../static/image/45.png" alt="" v-else/>
		  		 	</div>
		  		 	<div class="m" style="flex: 1;">
		  		 		<div class="font1" style="display: flex;justify-content: space-between;">		  		 			
		  		 			<span>{{item.memberName}}</span>
				  		 	<div class="r">
				  		 		 <van-rate v-model="item.evaluateScores" readonly :size="10"/>
				  		 	</div>		  		 			
		  		 		</div>
		  		 		<div>
		  		 			<span class="font2">{{item.evaluateTime}}</span>
		  		 			<span class="font2" style="margin-left: 8px;">{{item.goodsSpec}}</span>
		  		 		</div>
		  		 	</div>
	  		 </div>
	  		 <div class="h_2">{{item.evaluateContent}}</div>
	  		 <div class="h_3">
	  		 	  <div v-for="(section,index2) in formatArray(item.evaluateImagesUrlList)" class="section">
	  		 	  	<img :src="section.url" alt="" v-if="section.isVideo==0" class="sectionImg" @click="showImgBig(section)"/>
	  		 	  	
					    <video-player  
					    	v-else-if="section.isVideo==1"
					    	class="video-player vjs-custom-skin"
					      :ref="getRef(index2)"
					      :playsinline="true"
					      :options="section.options.playerOptions"
					    ></video-player> 	  		 	  	
	  		 	  </div>
	  		 </div>
  		 </div>
  	</div>
  	
  	<div class="c"></div>
  	
  	<div class="i" @click="newWin">
  		查看图文详情
  	</div>
  	
  	
  	<div class="j">
  		 <div class="j_1">
  		 	 <div class="item" @click="newWin">
  		 	 	 <img src="../../../static/image/06.png" alt="" />
  		 	 	 <div class="word">客服</div>
  		 	 </div>
  		 	 <div class="item" @click="newWin">
  		 	 	 <img src="../../../static/image/07.png" alt="" />
  		 	 	 <div class="word">收藏</div>  		 	 	
  		 	 </div>
  		 	 <div class="item" @click="newWin">
  		 	 	 <img src="../../../static/image/03.png" alt="" />
  		 	 	 <div class="word">购物车</div>   		 	 	
  		 	 </div>
  		 </div>
  		 <div class="j_2">
  		 	   <img src="../../../static/image/05.png" alt="" @click="newWin"/>
  		 	   <img src="../../../static/image/04.png" alt="" @click="buyNow"/>
  		 </div>
  	</div>
  	
  	<!--图片预览弹框-->
		<van-image-preview v-model="showImg" :images="imageList"></van-image-preview>  	
  	
  	
  	<!--优惠券弹框-->
		<van-popup
		  v-model="showCoupon"
		  position="bottom"
		  round
		  closeable 
		  :style="{ height: '90%' }"
		  class="coupon_popup"
		>
		    <div class="title">
		    	 优惠券
		    </div>
		    
		    <div class="coupon_box">
		    	
		    	<div style="margin-bottom: 10px;" v-for="(item,index) in couponList" :key="index"> 
		    		
			    	<div class="outWrap">
			    		
			    		<div class="inWrap">		    			
			    			<div class="left">
			    				  <div class="left1">
			    				  	<span style="font-size: 20px;">￥</span>
			    				  	<span style="font-size: 36px;">{{item.cardPrice}}</span>
			    				  </div>
			    				  <div class="left2">
			    				  	<span v-if="item.cardLimitOrdersAmount==0">任意金额可用</span>
			    				  	<span v-else>满{{item.cardLimitOrdersAmount}}元可用</span>
			    				  </div>
			    			</div>
			    			<div class="right">
			    				<div class="word1">{{item.activityName}}</div>
			    				<div class="word2" @click="getCouponApp">
			    					<div>{{formatTime(item.activityAddTime)}}~{{formatTime(item.activityEndTime)}}</div>
			    					<div class="get">点击领取</div>
			    				</div>
			    				<div class="word3">
			    					<div>详细信息（{{formatType(item)}}）</div>
			    			    <img src="../../../static/image/35.png" alt="" style="width: 11px;height: 11px;"  v-if="!item.isShow" @click="showInfo(index)"/>
			    				  <img src="../../../static/image/36.png" alt="" style="width: 11px;height: 11px;" v-else @click="showInfo(index)" />
			    				</div>
			    			</div>		    			
			    		</div>
			    		<img src="../../../static/image/34.png" alt="" style="width: 100%;"/>
			    	
			    	</div>
			    	
			    	
			    	<div class="coupon_info" v-show="item.isShow">
			    		<div v-if="item.cardUseGoodsRange==2&&item.categoryName1">限分类：仅限  <span class="color1">{{item.categoryName1}} </span> 商品</div>
			    		<div v-if="item.cardUseGoodsRange==1&&item.goodsName">限商品：仅限  <span class="color1"> {{item.goodsName}} </span> 可用</div>
			    		<div v-if="item.cardUseGoodsRange==2&&item.brandName">限品牌：仅限  <span class="color2">{{item.brandName}}</span> 品牌商品可用</div>
			    		<div v-if="item.cardUseGoodsRange==2&&item.supplierNickName">限商家：仅限  <span class="color3">{{item.supplierNickName}}</span> 商家内商品可用</div>
			    		<div v-if="item.cardUseGoodsRange==0" class="color1">全场通用优惠券</div>
			    		<div>使用说明：{{formatType(item)}}</div>
			    	</div>
			    	
			    	
		    	</div>   	
		    </div>
		
	
	
	
	</van-popup>  	
  	
  	<!--规格弹窗-->
		<van-popup
		  v-model="showSpecs"
		  position="bottom"
		  round
		  :style="{ height: '90%' }"
		>
		  <div class="specsWrap">
		  	 <div class="close" @click="showSpecs=false"><van-icon name="close" size="20" color="#999"/></div>
		  	 <div class="header">
			  	 	<div>
			  	 		<img :src="goodsInfo.goodsImageUrl" alt=""  class="hImg"/>
			  	 	</div>			  	 	
			  	 	<div class="r">
			  	 		 <div class="font1">{{goodsInfo.goodsName}}</div>
			  	 		 
			  	 		 
			  	 		 
			  	 		 <!--如果存在折扣价-->
			  	 		 <div class="r_1" v-if="goodsInfo.finalDiscountPrice>=0">
			  	 		 	 <div class="font2">￥{{formatPrice(12)}}
			  	 		 	 	<span style="color: #999;font-size: 14px;text-decoration: line-through">
			  	 		 	 		￥{{formatPrice(8)}}
			  	 		 	 	</span>			  	 		 	 	
			  	 		 	 </div>			  	 		 	
			  	 		 	 <div class="font3" v-if="goodsInfo.goodsList.length>0">库存{{goodsInfo.goodsList[0].goodsStorage}}件</div>
			  	 		 </div>
			  	 		 
			  	 		 <!--不存在折扣价-->
			  	 		 <div class="r_1" v-else>
			  	 		 	 <div class="font2">￥{{formatPrice(8)}}		  	 		 	 	
			  	 		 	 </div>			  	 		 	
			  	 		 	 <div class="font3" v-if="goodsInfo.goodsList.length>0">库存{{goodsInfo.goodsList[0].goodsStorage}}件</div>
			  	 		 </div>			  	 		 
			  	 		 
			  	 		 			  	 		 
			  	 		 <div class="r_2" v-if="goodsInfo.isRebate>0||goodsInfo.points>0">
		  			 	  <span class="bg bg1">
		  			 	  	<img src="../../../static/image/02.png" alt="" />
		  			 	  	<span>{{formatPrice(6)}}</span>
		  			 	  </span>			  	 		 	
		  			 	  <span class="bg bg2">
		  			 	  	<img src="../../../static/image/01.png" alt="" />
		  			 	  	<span>￥{{formatPrice(5)}}</span>
		  			 	  </span>
			  	 		 </div>
			  	 		 <div class="r_3">{{specTitle2}}</div>
			  	 	</div>
		  	 </div>
		  	 
		  	 
		  	 <!--选择规格-->
		  	 <div class="guige">
		  	 	  <div class="font1">规格</div>
		  	 	  <div class="wrap">
		  	 	  	<div class="font2" :class="{active:specActive==index,active2:item.goodsStorage==0}"
		  	 	  		v-for="(item,index) in goodsInfo.specList" @click="selectSpec(index,item)">
		  	 	  		{{item.goodsSpec}}
		  	 	  	</div>
		  	 	  </div>
		  	 </div>
		  	 
		  	 
		  	 <div class="number">
		  	 	 <div>数量</div>
		  	 	 <van-stepper v-model="goodsInfo.buyNumber" />
		  	 </div>
		  	 <div class="action" @click="showSpecs=false">
		  	 	 	<van-button type="primary" block color="#10B992" style="border-radius: 20px;">确认</van-button>
		  	 </div>


		  	 
		  </div>
		</van-popup>	
		
		
		<!--想购买商品弹窗-->
		<van-popup v-model="showPopup1" round>			
			<div class="q">
				<van-button color="#10B992" block style="margin-bottom: 16px;" @click="showLoginWin">我想购买这个商品</van-button>
				<van-button color="#FFB430" block @click="showPopup4=true">我想查询订单情况</van-button>
				<div class="cancle" @click="showPopup1=false">取消</div>
			</div>			
		</van-popup>
		
		<!--登录弹框-->
		<van-popup
		  v-model="showPopup2"
		  position="bottom"
		  round
		  closeable 
		  close-icon="close"
		  :style="{ height: '90%' }"
		>
		  <div class="s">
		  	  <div class="title">圈经济平台用户密码登录</div>
					<div class="inputWrap" :class="{active:inputActive==1}">
              <input type="text" class="input" placeholder="请输入用户名" @focus="userNameFocus" v-model="userInfo.username"/>
              <img src="../../../static/image/11.png" alt="" class="clear" @click="clearUserName"/>
					</div>	
					<div class="inputWrap" :class="{active:inputActive==2}">
              <input :type="loginPassword" class="input" placeholder="请输入密码" @focus="passwordFocus" v-model="userInfo.password"/>
              <van-icon name="closed-eye" class="eye" color="#E5E5E5" @click="changeType"/>
					</div>	
					
					<div class="register" @click="showPopup5=true">注册并购买</div>
					
					<div class="login" @click="login">登录并购买</div>
					<div class="direct" @click="showPopup3=true">直接购买</div>
		  </div>
		</van-popup>

    <!--用户收件地址弹框-->
		<van-popup
		  v-model="showPopup3"
		  position="right"
		  round
		  :style="{ height: '90%',width:'100%',top:'55%'}"
		>
		  <div class="t">
         <div class="header">
	         	<div @click="showPopup3=false"><img src="../../../static/image/12.png" alt=""/></div>
	         	<div @click="showPopup3=false"><van-icon name="close" color="#999" size="22"/></div>
         </div>
         <div class="t_1">
         	 <div>用户收件地址</div>
         </div>
         
         <div class="t_2">
						<div class="inputWrap" :class="{active:inputActive==7}">
	              <input type="text" v-model="AddresseeInfo.userName" class="input" placeholder="请输入收件人姓名" 
	              	@focus="focusAddress(7)" @blur="downActive=1"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="AddresseeInfo.userName=''"/>
						</div>	
						<div class="inputWrap" :class="{active:inputActive==8}">
	              <input type="text" v-model="AddresseeInfo.mobile" class="input" placeholder="请输入收件人手机号码" 
	              	@focus="focusAddress(8)" @blur="downActive=1"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="AddresseeInfo.mobile=''"/>
						</div>
						
						<div class="t_3" @click="showArea2">
               <div class="font1">{{areaTitle}}</div>
               <div class="font2" style="display: flex;align-items: center;">
               	 <span v-if="this.goodsInfo.freight>=0">{{formatPrice(9)}}</span>
               	 <van-icon name="arrow" color="#ccc" size="13" style="margin-left: 6px;"/>
               </div>
						</div>
						
						<div class="inputWrap" :class="{active:inputActive==9}">
	              <input type="text" v-model="AddresseeInfo.address" class="input" placeholder="请输入收件人详细地址"
	              	 @focus="focusAddress(9)" @blur="downActive=1"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="AddresseeInfo.address=''"/>
						</div>							
         </div>
         
         <div class="tips">只支持支付宝付款（如需售后请下载圈经济APP）</div>
         
         <van-button  size="large" color="#10B992" class="buyBtn" @click="queryBuy">确认购买</van-button>
         <van-button  size="large" color="#FFB430" class="buyBtn" @click="direct" style="margin-top: 10px;">登录APP购买可享受更多优惠</van-button>
		  </div>
		  <!--<div class="downLoad" :class="{active:downActive==1}" @click="newWin">
		  	<img src="../../../static/image/14.png" alt="" />
		  </div>-->
		  
		</van-popup>

    <!--订单查询弹框-->
		<van-popup
		  v-model="showPopup4"
		  position="bottom"
		  round
		  closeable 
		  :style="{ height: '90%'}"
		>
		  <div class="t">

         <div class="t_1">
         	 <div>我的订单查询</div>
         </div>
         
         <div class="t_2">
						<div class="inputWrap" :class="{active:inputActive==11}">
	              <input type="number"  class="input" v-model="searchMobile" placeholder="请输入您的手机号码" @focus="inputActive=11"/>
	              <span class="search" @click="searchOrder">查询</span>
						</div>
						<div class="inputWrap" style="display: flex;align-items: center;" v-if="orderList.length>0">
	              <input type="text" class="input" placeholder="" readonly="" v-model="orderSelect"/>
                <div class="down">
									<van-dropdown-menu>
									  <van-dropdown-item v-model="orderValue" :options="orderList" @change="changeOrder">
									  	<div slot="title">
									  		<img src="../../../static/image/23.png" alt="" style="width: 18px;height: 18px;"/>
									  	</div>
									  </van-dropdown-item>
									</van-dropdown-menu>	                	
                </div>	              	
						</div>	
         </div>
         
	      <div class="abnormal" v-if="abnormal">{{abnormalMessage}}</div>      
	      
	      
				<van-steps direction="vertical" :active="expressDetailVoList.length-1"  active-color="#10B992" style="margin-top: 10px;">
				  <van-step v-for="(item,index) in expressDetailVoList" :key="index">				  	
				  	<div slot="active-icon">
				  		<span class="point active"></span>
				  	</div>
				    <div>{{item.context}}</div>
				    <p>{{item.time}}</p>
				  </van-step>			  
				</van-steps>   
				
				
		  </div>		  
		</van-popup>
		
		<!--用户注册弹框-->
		<van-popup
		  v-model="showPopup5"
		  position="right"
		  round
		  :style="{ height: '90%',width:'100%',top:'55%'}"
		>
		  <div class="t">
         <div class="header">
	         	<div @click="showPopup5=false"><img src="../../../static/image/12.png" alt="" /></div>
	         	<div @click="showPopup5=false"><van-icon name="close" color="#999" size="22"/></div>
         </div>
         <div class="t_1">
         	 <div>用户注册</div>
         </div>
         
         <div class="t_2">
						<div class="inputWrap" :class="{active:inputActive==3}">
	              <input type="text" class="input" placeholder="请输入您的手机号" 
	              	@focus="inputActive=3" v-model="registerInfo.mobile"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="clearMobile"/>
						</div>	
						<div class="inputWrap" :class="{active:inputActive==4}">
	              <input type="text" class="input" placeholder="请输入您的密码" @focus="inputActive=4" 
	              	v-model="registerInfo.passwd"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="clearPasswd"/>
						</div>	
						<div class="inputWrap" :class="{active:inputActive==5}">
	              <input type="text" class="input" placeholder="请再次输入您的密码" @focus="inputActive=5"
	              	v-model="registerInfo.passwdAgain"/>
	              <img src="../../../static/image/11.png" alt="" class="clear" @click="clearPasswdAgain"/>
						</div>	
						<div class="inputWrap2" :class="{active:inputActive==6}">
	              <input type="text" v-model="registerInfo.sign" class="input2" placeholder="请输入验证码" @focus="inputActive=6"/>
	              <span class="yzm" @click="getYzm" v-show="canSend">{{yzmTitle}}</span>
	              <span style="color: #10B992;" v-show="!canSend">{{timer1}}<span>s</span></span>	             
						</div>	
						<div class="yqm" v-if="userInfo.invitationCode">
							<span>邀请码:</span>
							<span style="margin-left: 8px;">{{userInfo.invitationCode}}</span>
						</div>
						
						<div class="xy" @click="agree">
							<span class="radio" :class="{active:agreeRadio==1}">
								<div class="point" :class="{active:agreeRadio==1}"></div>
							</span>
							
							<span>我同意并阅读</span>
							<span style="color: #10B992;" @click="agreement">《圈经济用户注册协议》</span>
						
						</div>
						
						<van-button  size="large" color="#10B992" :loading="registerLoading"  class="registerBtn" @click="register">注册并购买</van-button>
         </div>       
		  </div>		  
		</van-popup>



    <!--用户填写收件地址时修改地址-->
    <!--<areaPopup2 ref="areaPopup2" @computerFeight="computerFeight2" @showPopup3="showPopup3=true"></areaPopup2>-->


    <!--海淘身份证上传-->
		<van-popup
		  v-model="showHt"
		  position="right"
		  :style="{ height: '100%',width:'100%' }"
		  class="ht"
		>
			<van-nav-bar>
				 <div slot="title" class="ht_title">海淘商品信息提交</div>
				 <div slot="left">
				 	 <van-icon name="arrow-left" color="#666666" size="20" @click="showHt=false"/>
				 </div>
			</van-nav-bar>
			
			
			<div class="ht_mask" v-if="isUpload">
				<van-loading /> 
			</div>
			
			<div class="container">
				 <div class="u_1">您选择的商品是海淘商品， 根据政策要求请完善以下信息（本信息仅用于海关清关，请放心填写）</div>
				 <div class="u_2">
				 	  <div class="font1">身份证</div>
				 	  <div class="input">
				 	  	<input type="text" placeholder="请输入收货人的身份证号" v-model="idCard.idNumber"/>
				 	  </div>
				 </div>
				 <div class="c"></div>
				 <div class="u_3">
				 	 <div class="font1">上传身份证</div>
				 </div>
				 <div class="u_4">
				 	 <van-uploader v-model="positiveFileList" class="uploader" :after-read="afterReadPositive" @delete="deletePositive">
				 	 	  <div slot="default">
				 	 	    <img class="defaultImg" src="../../../static/image/15.png" alt="" v-if="positiveFileList.length==0"/>				 	 	  	
				 	 	  </div>
				 	 </van-uploader>
				 	 <van-uploader v-model="backFileList"  class="uploader" :after-read="afterReadBack" @delete="deleteBack">
				 	 	  <div slot="default">
				 	 	     <img class="defaultImg" src="../../../static/image/16.png" alt="" v-if="backFileList.length==0"/>
				 	 	  </div>
				 	 </van-uploader>				 	 
				 </div>
				 <div class="u_5">
				 	 <div>身份证正面</div>
				 	 <div>身份证反面</div>
				 </div>
				 <div class="action">
				 	  <van-button color="#10B992" block @click="confirmHt">提交</van-button>
				 </div>
			</div>
		</van-popup>

    <!--协议弹窗-->
		<van-popup
		  v-model="showPopup6"
		  position="right"
		  :style="{ height: '100%',width:'100%' }"
		  class="ht"
		>
			<van-nav-bar>
				 <div slot="title" class="ht_title">注册协议</div>
				 <div slot="left" style="display: flex;justify-content: center;align-items: center;">
				 	 <van-icon name="arrow-left" color="#666666" size="20" @click="showPopup6=false"/>
				 </div>
			</van-nav-bar>
			<div class="container">
         <agreement></agreement>
			</div>
		</van-popup>
  </div>
</template>
<script>
import '&/css/base.css'
import '@/assets/css/reset.css'	
import '@/assets/css/coupon.css'	
import md5 from 'js-md5';
import areaPopup from './area.vue'
import agreement from './agreement.vue'
import { requestData } from '@/api/public'
import { requestData2 } from '@/api/public2'
import { getOptions } from '@/api/options'
import { openApp } from '@/api/openApp'
let options=getOptions()
export default {
	components: { areaPopup,agreement},
  data () {
    return {  
    	  isUpload:false , // 记录是否正在上传
    	  disType:'',   // 记录活动描述
    	  countDown:{d:'',m:'',h:'',s:''}, // 记录倒计时
    	  timer:null,  // 定时器管理
    	  discountIsUsable:'', // 记录该商品是否有活动
    	  couponList:[],   // 记录优惠券列表
    	  showCoupon:false, // 优惠券弹框
    	  discountCountDownTime:'', // 倒计时时间
    	  downActive:1,              // 点击输入框的时候防止上浮
    	  videoId:1,                 // 评论视频ref号 
	      orderValue: -1,            // 初始选中订单号，基本不用
	      orderList: [],    	    	 // 查询出的订单列表
	      orderSelect:'',            // 选中的订单号
    	  showOverlay:false,         // 显示遮罩层 
    	  searchMobile:'',           // 订单查询手机号 
    	  expressDetailVoList:[],    // 储存订单物流信息
    	  abnormal:false,            // 是否显示订单异常文字
    	  abnormalMessage:'',        // 订单异常文字
    	  hd:false,                  // 暂时没有活动，所以一直为false
        playerOptions :options.playerOptions, // 视频播放配置属性   	    	    	
    	  url2:'/test/goods/detail',  // 获取商品详细信息   	    	
    	  url1:'/test/oss/upload/common', // 用于绑定图片上传地址
    	  url3:'/test/site/coefficient', // 用于获取积分、返利系数
    	  url4:'/test/goods/freight',    // 用于计算运费
    	  url5:'/login/getuUserInfoById',    // 登录接口    	  
    	  url6:'/registerApi/updatecgr/v1',              // 注册接口
    	  url7:'/login/sms/sendValidateCode', // 获取手机验证码
    	  url8:'/test/h5/address/add',  // 生成地址ID 针对登录用户
    	  url9:'/test/h5/address/addIdCard', // 上传海淘身份证信息 针对登录用户
    	  url10:'/pay/alipay/wap',        // 支付接口 
    	  url11:'/test/h5/query/ordersSn',// 手机查询订单信息 
    	  url12:'/test/h5/query/express', // 查询订单物流信息
    	  url13:'/token/shopRelease/shopLogin',        // 获取用户token
    	  url14:'/test/h5/address/add',    // 生成地址ID 针对没有登录的用户
    	  url15:'/test/h5/address/addIdCard', // 上传海淘身份证信息 针对没有登录的用户
    	  url16:'/test/coupon/activity/apply',// 获取商品是否有优惠券活动
    	  commonId:'',               // 商品commonId 分享的URL带出来的
    	  swiperList:[],             // 用于储存轮播项 因为有视频和图片 所以要加进去
    	  goodsInfo:{
    	    discountQuotaRule:'', // 记录折扣规则
    	    discountQuotaType:'', // 记录折扣类型和    	  	
    	  	finalDiscountPrice:-1,   // 商品的最终折扣价  初始值为-1 不存在
    	  	goodsName:'',            // 商品标题
    	  	goodsSales: 0,           // 多少人购买
    	  	showLine:true,           // 是否显示画线价 当最低画线价和起始价相同时为false
    	  	lineThroughPriceMin:0,   // 商品画线最低价    	  	
    	  	priceMin:0,              // 商品起始价      	
    	  	priceMax:0,              // 商品最高价
    	  	isGoodsTagNew:0,         // 是否新品 
    	  	shareIntro:'',           // 描述    	  	    	  	
    	  	isRebate: 0,             // 是否存在返利 1存在 0不存在
          points :0,               // 是否存在积分 1存在 0不存在
          isStock:0,               // 是否返股权币 1反0不反
          rebatePrice:0,           // 积分、返利基数
          rebate:0,                // 返利系数
          integral:0,              // 积分系数
          stockSales:null,         // 股权币分母 可能为null
          goodsImageUrl:'',        // 商品图片
          finalPrice:0,            // 最终商品价
          goodsList:[],            // 选择规格后储存的规格数据
          specList:[],             // 规格列表
          buyNumber:1,             // 选择购买商品数量
          freight:-1,              // 商品运费
          allowSend:-1,            // 是否有货 1有 0无 初始值为-1 
          userForGoods:{           // 供货商信息
          	nickName:'',           // 供货商昵称
          	goodsTotal:'',         // 供货商在线销售商品总量
          	userBannerUrl:''       // 供货商logo(横幅)
          },
          evaluateAll:0,           // 商品评价总数
          evaluateList:[],         // 商品评价列表
          goodsModal:-1,           // 判定是否是海淘商品条件1
          haiTao:-1,               // 判定是否是海淘商品条件2
    	  },
    	  specTitle1:'请选择规格',       // 选择规格后的主页面前端展示的标题
    	  specTitle2:'请选择规格',       // 选择规格后的弹框面前端展示的标题
    	  showSpecs:false,           // 显示规格弹窗
    	  specActive:-1,             // 规格选择(是否点击过规格)
    	  current: 0,                // 轮播图当前的项的下标
    	  areaTitle:'请选择配送地区',  // 区域选择标题
    	  stockStatus:-1,            // 库存状态
    	  showImg:false,             // 图片预览弹框
    	  imageList:[],              // 图片预览数据储存
    	  showHt:false,              // 上传海淘身份证弹框
    	  showPopup1:false,          // 想购买弹窗
    	  showPopup2:false,          // 登录弹框
    	  showPopup3:false,           // 用户收件地址弹框
    	  showPopup4:false,          // 查询订单弹框
    	  showPopup5:false,          // 用户注册弹框
    	  showPopup6:false,          // 协议弹窗   
    	  userInfo:{                 // 用户信息   
    	  	username:'',             // 用户名
    	  	password:'',             // 登录密码
    	  	userId:'',               // 用户ID
    	  	invitationCode:'',        // 邀请码
    	  	token:''
    	  },
    	  registerInfo:{             // 注册字段
				  "sign" : "",             // 手机验证码
				  "mobile" : "",           // 手机号码
				  "cmd" : "Register",      // 接口名称，写死的
				  "passwd" : "",           // 密码
				  "passwdAgain":''         // 再次输入密码
    	  },
    	  registerLoading:false,     // 注册是否在加载中
    	  loginPassword:'password',  // 绑定登录弹框下输入框类型 
    	  inputActive:0,             // 用于绑定点击点击输入框后样式变绿
    	  agreeRadio:1,              // 用于绑定是否同意注册协议
    	  yzmTitle:'点击获取验证码',       // 验证码标题
    	  canSend:true,              // 是否能够发送验证码
    	  mobileCode:'',             // 储存发送的手机验证码
    	  timer1:60,                 // 记录可再次发送验证码的时间 
    	  AddresseeInfo:{            // 收件人信息
    	  	userName:"",             // 收件人姓名 
    	  	mobile:'',               // 收件人电话
    	  	address:'',              // 收件人详细地址
    	  	addressAreaId1:'',       // 保存1级区域ID
    	  	addressAreaId2:'',       // 保存2级区域ID
    	  	addressAreaId3:''	       // 保存3级区域ID
    	  },
    	  idCard:{                   // 保存上传的身份证信息
				  "addressId": "",         // 保存收件人地址ID 如果商品是海淘的话需要用到
				  "idCardNegativeImage": "",  // 保存身份证反面图片
				  "idCardPositiveImage": "",  // 保存身份证正面图片
				  "idNumber": "",    	  	    // 保存身份证号码
				  "hasIdCard":-1            // 是否上传过海淘身份证
    	  },                 
    	  positiveFileList:[],       
    	  backFileList:[],
    	  commitmentList:[]  // 记录服务承诺
    }
  }, 
  computed: { 
    isOpenInApp: function () {
      // 判断是否在IOS环境下
      var ua = navigator.userAgent.toLowerCase()
      // 如果实在苹果的浏览器里就不显示 否则就是在苹果的app里就显示  这边容易写反
      if (ua.match(/(iPhone|iPod|iPad);?/i)) {
        if (ua.match(/safari/i)) {
          return false
        // eslint-disable-next-line eqeqeq
        } else if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          return false
        } else {
          return true
        }
      }
      // 判断是否在安卓环境下
      if (ua.match(/android/i)) {
        try {
          window.loadAndroid.readPackage()
          return true
        } catch (err) {
          return false
        }
      }
    }
  },
  mounted () {
  	 this.commonId=this.$router.currentRoute.query.commonId
  	 if(typeof(this.$router.currentRoute.query.invitationCode)=='object'){
  	 	this.userInfo.invitationCode=this.$router.currentRoute.query.invitationCode[0]
  	 }else{
  	 	this.userInfo.invitationCode=this.$router.currentRoute.query.invitationCode
  	 }
  	 this.getData()  
  	 this.getCoupon()
		 let wx=navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
		 if(wx){
		 	 this.showOverlay=true
		 }
  },
  methods: {
  	// 倒计时
  	countDownTime(time){
  		let that=this
  		that.timer=setInterval(function(){
  			if(time<=0){
  				clearInterval(that.timer)
  				that.discountIsUsable=0
  			}
	  		let time1=time/86400	  			  			  			  			  			  		
			  that.countDown.d=Math.floor(time1)			  
			  if(that.countDown.d<10){
			  	that.countDown.d='0'+that.countDown.d
			  }			  
	   		let time2=(time%86400)/3600 
			  that.countDown.h=Math.floor(time2)  	
			  if(that.countDown.h<10){
			  	that.countDown.h='0'+that.countDown.h
			  }
			  let time3=((time%86400)%3600)/60 		
		  	that.countDown.m=Math.floor(time3)	
		  	if(that.countDown.m<10){
		  		that.countDown.m='0'+that.countDown.m
		  	}
		  	that.countDown.s=((time%86400)%3600)%60  	
		  	if(that.countDown.s<10){
		  		that.countDown.s='0'+that.countDown.s
		  	}
		  	time--
  		},1000)  			  		  	
  	},
  	// 跳转APP 获取优惠券
  	getCouponApp(){
  		this.showCoupon=false
  		this.direct()
  	},
  	// 切换显示优惠券具体信息
  	showInfo(index){  		  		
  		let obj=this.couponList[index]
  		obj.isShow=!obj.isShow  		
  		this.$set(this.couponList, index, obj);
  	},
  	// 转义优惠券类型说明
  	formatType(item){
  		let str=''
  		if(item.cardUseGoodsRange==0){
  			str='全场通用'
  		}else if(item.cardUseGoodsRange==1){
  			str='限指定商品'
  		}else if(item.cardUseGoodsRange==2){ 			
  			let arr=[]
  			if(item.categoryName1){
  				arr.push('限分类')
  			}
  			if(item.brandName){
  				arr.push('限品牌')
  			}  			
  			if(item.supplierNickName){
  				arr.push('限商家')
  			}
  			str=arr.join('、')
  		}  		
  		return str
  	},
  	formatDisType(rule,type){
  		let str=''
		  if(type==0){
		  	str="本次活动不限购享受商品折扣价"
		  }else if(type==1){
		  	str='本次活动每人限购'+rule+'件'
		  }else if(type==3){
		  	str="本次活动仅限新人享受商品折扣价"
		  }else if(type==2){
		  	str='本次活动每人前'+rule+'件享受该折扣'
		  }
		  return str
  	},  	
  	// 转义时间
  	formatTime(time){
  		time=time.substring(0,10)
  		time=time.replace(/-/g,'.')
  		return time
  	},
  	// 获取商品优惠券
  	getCoupon(){
  		let params={
        "coomonId": this.commonId 			
  		}
  		let that=this
  		requestData(this.url16,'POST',params).then(function(res){
  			 that.couponList=res.data.couponActivityList
  			 if(that.couponList){
	  			 for(var i=0;i<that.couponList.length;i++){
	  			 	 that.couponList[i].isShow=false
	  			 }  			 	
  			 }

  		})
  	},
  	agreement(){
  		this.showPopup6=true
  	},
  	// 深复制一个对象
  	cloneObj(obj){
		    var newObj = {};
		    if (obj instanceof Array) {
		        newObj = [];
		    }
		    for (var key in obj) {
		        var val = obj[key];
		        newObj[key] = typeof val === 'object' ? this.cloneObj(val) : val;
		    }
		    return newObj;  		
  	},
  	checkArr(arr,item,field){
  		let num=-1;
  		for(var i=0;i<arr.length;i++){
  			if(item==arr[i][field]){
  				num=i
  				break;
  			}
  		}
  		return num
  	},
  	// 获取商品详情
  	getData(){
  		requestData(this.url3,'POST',{}).then(result=>{ 
  			this.goodsInfo.rebate=result.data.rebate;  // 返利系数
  			this.goodsInfo.integral=result.data.integral; // 积分系数
				requestData(this.url2,'POST',{commonId:this.commonId}).then(res=>{ 
					 // 轮播图处理
					 let goodsVideoList=res.data.goodsDetailVo.goodsVideoList
					 if(goodsVideoList.length>0){
					 	  let obj={isVideo:true}
					    this.swiperList.push(obj)
					    this.playerOptions.sources[0].src=goodsVideoList[0].goodsImageUrl
					 }
					 let goodsImageList=res.data.goodsDetailVo.goodsImageList
					 this.swiperList=this.swiperList.concat(goodsImageList)
					 // 标题处理
					 this.goodsInfo.goodsName=res.data.goodsDetailVo.goodsCommon.goodsName
					 // 价格处理
					 let lineThroughPriceMax=res.data.goodsDetailVo.lineThroughPriceMax
					 let lineThroughPriceMin=res.data.goodsDetailVo.lineThroughPriceMin
					 let priceMax=res.data.goodsDetailVo.priceMax
					 let priceMin=res.data.goodsDetailVo.priceMin
					 if(lineThroughPriceMin==priceMin){
					 	 this.goodsInfo.showLine=false
					 }
					 this.goodsInfo.lineThroughPriceMin=lineThroughPriceMin
					 this.goodsInfo.priceMin=priceMin
					 this.goodsInfo.priceMax=priceMax
					 // 多少人购买
					 this.goodsInfo.goodsSales=res.data.goodsDetailVo.goodsCommon.goodsSales
					 // 是否新品
					 this.goodsInfo.isGoodsTagNew=res.data.isGoodsTagNew   
					 // 描述
					 this.goodsInfo.shareIntro=res.data.goodsDetailVo.goodsCommon.shareIntro
					 // 是否存在返利 1存在 0不存在
					 this.goodsInfo.isRebate=res.data.goodsDetailVo.goodsCommon.isRebate
					 // 是否存在积分 1存在 0不存在
					 this.goodsInfo.points=res.data.goodsDetailVo.goodsCommon.points
					 // 是否返股权币 1反0不反
					 this.goodsInfo.isStock=res.data.goodsDetailVo.isStock
					 // 积分、返利基数
					 this.goodsInfo.rebatePrice=res.data.goodsDetailVo.goodsCommon.rebatePrice	
					 // 股权币分母
					 this.goodsInfo.stockSales=res.data.goodsDetailVo.stockSales	
					 // 商品缩略图 默认
					 this.goodsInfo.goodsImageUrl=res.data.goodsDetailVo.goodsCommon.goodsImageUrl
					 
					 // 最终价的初始值
           this.goodsInfo.finalPrice=priceMin
           // 规格列表
           this.goodsInfo.specList=res.data.goodsDetailVo.goodsList                      
           // 折扣列表
           let discountGoodsList=res.data.goodsDetailVo.discountGoodsList
           if(discountGoodsList.length>0){
	           for(var i=0;i<this.goodsInfo.specList.length;i++){
	           	 let num=this.checkArr(discountGoodsList,this.goodsInfo.specList[i].goodsId,'goodsId')
	           	 if(num>=0){
	           	 	 this.goodsInfo.specList[i].discountPrice=discountGoodsList[num].discountPrice
	           	 }           	 
	           }           	
           }
           if(res.data.goodsDetailVo.discount){
	           this.goodsInfo.discountQuotaRule=res.data.goodsDetailVo.discount.discountQuotaRule
	           this.goodsInfo.discountQuotaType=res.data.goodsDetailVo.discount.discountQuotaType                
	           this.disType=this.formatDisType(this.goodsInfo.discountQuotaRule,this.goodsInfo.discountQuotaType)
	           // 是否存在活动
	           this.discountIsUsable=res.data.goodsDetailVo.discountIsUsable
	           // 活动倒计时
	           this.discountCountDownTime=res.data.goodsDetailVo.discountCountDownTime
	           if(this.discountCountDownTime>0){
	           	this.countDownTime(this.discountCountDownTime)
	           }           	
           }

                  
           // 供应商数据
           this.goodsInfo.userForGoods.nickName=res.data.userForGoodsVo.nickName
           this.goodsInfo.userForGoods.goodsTotal=res.data.userForGoodsVo.goodsTotal
           this.goodsInfo.userForGoods.userBannerUrl=res.data.userForGoodsVo.userBannerUrl           
           // 服务承诺           
           this.commitmentList=res.data.commitmentList
           
           // 商品评价总数
           this.goodsInfo.evaluateAll=res.data.evaluateAll
           // 商品评价列表
           this.goodsInfo.evaluateList=res.data.evaluateList
           // 判定是否是海淘商品条件1
           this.goodsInfo.goodsModal=res.data.goodsDetailVo.goodsCommon.goodsModal
           // 判定是否是海淘商品条件2
           this.goodsInfo.haiTao=res.data.goodsDetailVo.goodsCommon.haiTao
				})   		
  		})  		  		 		
  	},
  	
  	// 选择规格
  	selectSpec(index,item){  		
  		if(item.goodsStorage<=0){
  			return false
  		}
      this.specActive=index // 切换底色
      let goodsSpec=item.goodsSpec 
      this.specTitle2="已选:"+item.goodsSpec // 改变规格文字描述
      this.specTitle1=item.goodsSpec // 改变规格文字描述
      this.goodsInfo.goodsList=[]        
      this.goodsInfo.goodsList.push(item) // 改变该规格库存
      this.goodsInfo.goodsImageUrl=item.goodsImageUrl // 改变该规格图片
      this.goodsInfo.finalPrice=item.goodsPrice  // 改变商品的最终价格
      // 改变商品的最终折扣价
  		if(item.discountPrice){
  			this.goodsInfo.finalDiscountPrice=item.discountPrice
  		}else{
  			this.goodsInfo.finalDiscountPrice=-1
  		}
      this.stockStatus=item.goodsStorage   // 改变商品库存状态
  	},
  	
    accMul(arg1,arg2){
         var m=0,s1=arg1.toString(),s2=arg2.toString();
         try{m+=s1.split(".")[1].length}catch(e){}
         try{m+=s2.split(".")[1].length}catch(e){}        
         return (Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)).toFixed(2);
    },
  	// 格式化各种价格
  	formatPrice(type){
  		if(type==1){
  			let num=(this.goodsInfo.priceMin).toFixed(2)
  			let arr=num.split('.')
  			return arr[0]
  		}else if(type==2){
  			let num=(this.goodsInfo.priceMin).toFixed(2)
  			let arr=num.split('.')
  			return arr[1]  			
  		}else if(type==3){
  			let num=(this.goodsInfo.lineThroughPriceMin).toFixed(2)
  			let arr=num.split('.')
  			return arr[0]    			
  		}else if(type==4){
  			let num=(this.goodsInfo.lineThroughPriceMin).toFixed(2)
  			let arr=num.split('.')
  			return arr[1]    			
  		}else if(type==5){
		  	let num=(Math.floor((this.goodsInfo.rebatePrice*this.goodsInfo.rebate)*100))/100
  			return num  			
  		}else if(type==6){
        let num=this.accMul(this.goodsInfo.rebatePrice,this.goodsInfo.integral)
        num=Number(num).toFixed(0)
  			return num    			
  		}else if(type==7){
  			if(this.goodsInfo.stockSales){
  				let num=(this.goodsInfo.priceMax/this.goodsInfo.stockSales).toFixed(3)
  				return num
  			}else{
  				return '0.000'
  			}  			
  		}else if(type==8){  			
				let num=(this.goodsInfo.finalPrice).toFixed(2)
				return num  				  			
  		}else if(type==9){
  			if(this.goodsInfo.freight==0){
  				return '免运费'
  			}else{
  				return `运费: ${this.goodsInfo.freight} 元`
  			}
  		}else if(type==10){
  			if(this.goodsInfo.allowSend>0){
  				return '现货'
  			}else if(this.goodsInfo.allowSend==0){
  				return '缺货'
  			}else{
  			  return ''
  			}  			
  		}else if(type==12){
				let num=(this.goodsInfo.finalDiscountPrice).toFixed(2)
				return num    			
  		}
  	},
  	// 计算运费
  	computerFeight(info,areaId2,areaId1,areaId3){  		 
       let params={
			  "areaId2": areaId2,
			  "buyNum": this.goodsInfo.buyNumber,
			  "goodsId": this.goodsInfo.goodsList[0].goodsId     	
       }
       this.AddresseeInfo.addressAreaId1=areaId1
       this.AddresseeInfo.addressAreaId2=areaId2
       this.AddresseeInfo.addressAreaId3=areaId3
		   requestData(this.url4,'POST',params).then(res=>{ 
				 this.goodsInfo.freight=res.data.freightAmount
				 this.goodsInfo.allowSend=res.data.allowSend
				 this.$refs.areaPopup.bindCloseArea()
				 this.areaTitle=info
			 })	       
  	},
  	// 直接跳转
  	direct(){
	    	let AndroidUrl="quanclubs://app/productDetails?launchCommonId="+this.commonId
	    	let IphoneUrl="quanclubs://ActionGoodsDetails/pushGoodsDetailsSceneWithParams?commonId="+this.commonId
	    	openApp(AndroidUrl,IphoneUrl,function(){window.location.href="http://mmds.mingsdai.com/downLoad.html"})  		
  	},
  	// 跳转到新窗口
  	newWin(){			
	    this.$dialog.confirm({
	    	title:'提示',
	      message: '该功能需要在APP操作，是否前往APP',
	    }).then(() => { //点击确认按钮后的调用	  
	    	
	    	let AndroidUrl="quanclubs://app/productDetails?launchCommonId="+this.commonId
	    	let IphoneUrl="quanclubs://ActionGoodsDetails/pushGoodsDetailsSceneWithParams?commonId="+this.commonId
	    	openApp(AndroidUrl,IphoneUrl,function(){window.location.href="http://mmds.mingsdai.com/downLoad.html"})
//				if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
//					window.location.href = IphoneUrl
//				} else if(navigator.userAgent.match(/android/i)) {
//					window.location.href = AndroidUrl
//				}	    	
//	    	
        // window.location.href="https://api.quanclubs.com/h5/index.html#/download"
			})
			.catch(() => { //点击取消按钮后的调用
			})
  	},
  	// 转义评论图片数组
  	formatArray(arr){
  		if(!arr){
  			arr=[]
  		}
  		let newArr=[]
  		let hasVideo=false;
  		for(var i=0;i<arr.length;i++){
  			if(arr[i].indexOf('.mp4')>=0){
  				hasVideo=true
  			}
  		}
  		if(hasVideo){
  			let obj={
  				isVideo:1,
  				fm:arr[0],
  				url:arr[1]
  			}
  			obj.options=this.cloneObj(options);
  			obj.options.playerOptions.poster=arr[0]
  			obj.options.playerOptions.sources[0].src=arr[1]
  			newArr.push(obj)
  			for(var i=2;i<arr.length;i++){
  				let obj2={
  					isVideo:0,
  					url:arr[i]
  				}
  				newArr.push(obj2)
  			}  			
  		}else{
				for(var i=0;i<arr.length;i++){
					let obj2={
						isVideo:0,
						url:arr[i]
					}
					newArr.push(obj2)
				}  			
  		}
  		return newArr
  	},
  	// 点击放大图片
  	showImgBig(item){
  		this.showImg=true
  		this.imageList=[]
  		this.imageList.push(item.url)
  	},
  	// 判断是否是海淘商品
  	checkHt(){
  		let status1=this.goodsInfo.goodsModal==2
  		let status2=this.goodsInfo.haiTao<=5
  		if(status1&&status2){
  			return true
  		}
  		else{
  			return false
  		}  		
  	},
  	// 立即购买商品按钮
  	buyNow(){
  		// 验证是否选择了规格
  		if(this.specActive<0){
  		  this.$toast('请选择规格');
  			return false
  		}
  		// 验证是否选择了配送地区
  		if(this.goodsInfo.freight<0){
  		  this.$toast('请选择配送地区');
  			return false  			
  		}
  		if(this.goodsInfo.allowSend<=0){
  			this.$toast('缺货中无法购买');
  			return false 
  		}  		
  		this.showLoginWin()
      // this.showPopup1=true 
  	},
  	// 点击了我想要购买商品这个按钮
  	showLoginWin(){
  		// 我想要购买商品的弹框
  		this.showPopup1=false
  		// 判断是否登录过
  		if(this.userInfo.userId){
  			this.showPopup3=true
  		}else{
  			this.showPopup2=true
  		}  		
  	},  
  	// 清除登录弹框下用户名输入
  	clearUserName(){
  		this.userInfo.username=''
  	},
  	// 改变密码框类型
  	changeType(){
  		if(this.loginPassword=="password"){
  			this.loginPassword="test"
  		}else{
  			this.loginPassword="password"
  		}
  	},
  	// 用户登录输入用户名时的获取焦点事件
  	userNameFocus(){
  		this.inputActive=1
  	},
  	// 用户登录输入密码时的获取焦点事件
  	passwordFocus(){
  		this.inputActive=2
  	},  	
  	// 登录操作
  	login(){
  		if(!this.userInfo.username){
  		  this.$toast('请输入用户名');
  			return false
  		}
  		if(!this.userInfo.password){
  			this.$toast('请输入用户密码');
  			return false
  		}
  		// 首先获取token
  		let params={
			  "loginType": "3",
			  "password": md5(md5(this.userInfo.password)),
			  "username": this.userInfo.username,
			  "equipmentNo":"H5"+this.userInfo.username
  		}
			requestData(this.url13,'POST',params).then(res=>{ 
				 if(res.data.userId){
	         if(res.responseCode!=100){
	         	 alert(res.messageList[0].message)
	         	 return false
	         }else{
	         	// this.userInfo.token=res.data.oauth2AccessToken.access_token
	         	this.userInfo.userId=res.data.userId
						this.showPopup2=false
						this.showPopup3=true         		          	
	         }				 	
				 }else{
				 	 this.$toast('账号名或密码错误')
				 }
				
			})  		 		
  	},
  	// 点击注册协议
  	agree(){
  		if(this.agreeRadio==0){
  			this.agreeRadio=1
  		}else{
  			this.agreeRadio=0
  		}
  	},
  	// 点击获取验证码
  	getYzm(){
  		// 验证手机号码格式
  		let reg=/^1[3456789]\d{9}$/
  		if(!reg.test(this.registerInfo.mobile)){
  			this.$toast('请输入正确的手机号');
  			return false
  		}
  		let params={
  			"mobile": this.registerInfo.mobile
  		}
  		this.canSend=false
			requestData(this.url7,'POST',params).then(res=>{ 
				if(res.responseCode==100){
					this.$toast('验证码发送成功,有效时间1分钟');
					this.mobileCode=res.data.code
					this.timing()
				}else{
	  			this.$toast('验证码发送失败');
	  			return false					
				}
			})	    		
  	},
  	// 再次发送验证码倒计时
  	timing(){
  		let that=this
  		let timer=setInterval(function(){
  			if(that.timer1==0){
  				clearInterval(timer)
  				that.timer1=60
  				that.canSend=true
  			}else{
  				that.timer1--
  			}
  		},1000)
  	},
  	// 清除注册时输入的手机号
  	clearMobile(){
  		this.registerInfo.mobile=''
  	},
  	// 清除注册时输入的密码
  	clearPasswdAgain(){
  		this.registerInfo.passwdAgain=''
  	},
  	// 清除注册时输入的确认密码
  	clearPasswd(){
  		this.registerInfo.passwd=''
  	},
  	// 注册
  	register(){
  		// 验证手机号码格式
  		let reg=/^1[3456789]\d{9}$/
  		if(!reg.test(this.registerInfo.mobile)){
  			this.$toast('请输入正确的手机号');
  			return false
  		}
  		// 验证密码
  		if(!this.registerInfo.passwd){
  			this.$toast('请输入正确的用户密码');
  			return false
  		}  			  		
  		// 验证2次密码是否一致
  		if(this.registerInfo.passwd!=this.registerInfo.passwdAgain){
  			this.$toast('两次密码输入不一致');
  			return false  			
  		}
  		// 验证协议是否同意
  		if(this.agreeRadio!=1){
  			this.$toast('请同意圈经济用户协议');
  			return false  	  			
  		}
  		if(!this.registerInfo.sign){
  			this.$toast('请输入验证码');
  			return false  	    			
  		}
      this.registerLoading=true
      let str="?sign="+this.registerInfo.sign+"&mobile="+this.registerInfo.mobile+"&cmd=Register&passwd="+md5(md5(this.registerInfo.passwd)) 
      let url=this.url6+str
			requestData2(url,'GET').then(res=>{ 				 
         this.registerLoading=false
         // 注册成功
         if(res.responseCode==100){
         	this.userInfo.username=this.registerInfo.mobile
         	this.userInfo.userId=res.data.nUid  
			  	let params={
						  "loginType": "3",
						  "password": md5(md5(this.registerInfo.passwd)),
						  "username": this.userInfo.username,
						  "equipmentNo":"H5"+this.userInfo.username
			  	}
			  	// 自动登录
					requestData(this.url13,'POST',params)   					
					// 有邀请码绑定上级
         	if(this.userInfo.invitationCode){
         	 	 let str=this.url6+'?cmd=InviteCode&memberId='+this.userInfo.userId+'&inviteCode='+this.userInfo.invitationCode
         	 	 requestData(str,'GET').then(result=>{ 
         	 	 	 if(result.responseCode!=100){
         	 	 	  	alert('注册成功,但绑定邀请码失败,'+result.messageList[0].message)         	 	 	 
         	 	 	 }  
         	 	 	 this.showPopup3=true
         	 	 })
         	}else{
         	 	 this.showPopup5=false
         	 	 this.showPopup3=true         	 	 
         	 }
          }else{
         	   alert(res.messageList[0].message)
          }
			})	
  	},
  	afterReadBack(res){
  		this.isUpload=true
			let that=this
	    var obj = this.dataURLtoBlob(res.content);
			var fd = new FormData();
			fd.append("file", obj,"image.png");
			requestData(this.url1,'POST',fd).then(result=>{ 
				 this.idCard.idCardNegativeImage=result.data.url;		 
				 this.isUpload=false
			})	  		
  	},
		// base64转图片
		dataURLtoBlob(dataurl) {		
		    var arr = dataurl.split(','),		
		    mime = arr[0].match(/:(.*?);/)[1],		
		    bstr = atob(arr[1]),		
		    n = bstr.length,		
		    u8arr = new Uint8Array(n);		
		    while (n--) {		
		        u8arr[n] = bstr.charCodeAt(n);		
		    }		
		    return new Blob([u8arr], {		
		        type: mime		
		    });		
		},
		// 上传身份证正面
		afterReadPositive(res){	
			this.isUpload=true
			let that=this
	    var obj = this.dataURLtoBlob(res.content);
			var fd = new FormData();
			fd.append("file", obj,"image.png");
			requestData(this.url1,'POST',fd).then(result=>{ 
				this.idCard.idCardPositiveImage=result.data.url;	
				this.isUpload=false
			})	
		},
		// 删除正面
		deletePositive(res){
			this.idCard.idCardPositiveImage=''
		},
		// 删除反面
		deleteBack(res){this.idCard.idCardNegativeImage=''},
		
		
		// 提交上传海淘信息
		confirmHt(){
			if(this.isUpload){
				return false
			}
			let reg=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
			if(!reg.test(this.idCard.idNumber)){
  			this.$toast('请输入正确的身份证号码');
  			return false				
			}
			if(!this.idCard.idCardNegativeImage){
  			this.$toast('请上传身份证反面照');
  			return false							
			}
			if(!this.idCard.idCardPositiveImage){
  			this.$toast('请上传身份证正面照');
  			return false							
			}			
			let url;
	    if(this.userInfo.userId){
				url=this.url9
			}else{
				url=this.url15
			}			
	    requestData(url,'POST',this.idCard).then(res=>{
	    	this.idCard.hasIdCard=1
	      this.showHt=false
		  })				
		},
		creatOrderId(){
			let price;
			if(this.goodsInfo.goodsList[0].discountPrice>=0){
				price=this.goodsInfo.goodsList[0].discountPrice
			}else{
				price=this.goodsInfo.goodsList[0].goodsPrice
			}			
			let cashAmount=((price*this.goodsInfo.buyNumber)+this.goodsInfo.freight).toFixed(2)
			let params={
				"paymentCode": "alipay",
				"clientType": "wap",
				"addressId": this.idCard.addressId,
				"buyNum": this.goodsInfo.buyNumber,
				"cashAmount": cashAmount, // 规格单价*数量+运费		
				"goodsId": this.goodsInfo.goodsList[0].goodsId
			}
			let url=''
			// 注册用户购买
			if(this.userInfo.userId){
				params.memberId=this.userInfo.userId
				params.userKey='H5'+this.userInfo.username
				url='/test/buy/add'
			}else{
				url='/test/h5/buy/add'
			}
		  requestData(url,'POST',params).then(res=>{ 
         if(res.responseCode==100){
         	 // 调用支付宝支付
         	  let backUrl=window.location.host+'/paySuccess.html?commonId='+this.commonId+'&invitationCode='+this.userInfo.invitationCode
         	  window.location.href="http://app30.mingsdai.com/services/payservice/api/v1/h5/alipay/wap"+'?ordersId='+res.data.ordersId+'&url='+backUrl
//          http://app30.mingsdai.com
//          http://jishi.quanshid.com
//          http://192.168.10.186:30003
         }else{
         	alert(res.messageList[0].message)
         }
			})		  			
		},
  	// 确认购买
  	queryBuy(){
			if(this.goodsInfo.freight<0){
				this.$toast('请选择地区计算运费');
				return false
			}
			if(!this.AddresseeInfo.userName){
				this.$toast('请输入收件人姓名');
				return false				
			}
			if(!this.AddresseeInfo.address){
				this.$toast('请输入收件人详细地址');
				return false				
			}	
			let reg=/^1(3|4|5|6|7|8|9)\d{9}$/
			if(!reg.test(this.AddresseeInfo.mobile)){
				this.$toast('请输入正确的手机号');
				return false
			}			
  		// 判定是否海淘商品 判断是否上传过身份证  判断是否生成地址ID
  		let result=this.checkHt()
  		// 如果是海淘商品
  		if(result){
  			// 已上传过身份证信息
  			if(this.idCard.hasIdCard>0){
  				// 生成订单 然后支付
  				this.creatOrderId()
  			}else{
  				// 已生成过地址ID
	  			if(this.idCard.addressId){
	  				 // 打开海淘弹框
	  				 this.showHt=true
	  			}else{
	  			   // 生成地址ID在打开海淘弹框
		  			 let params={
		  					"address":this.AddresseeInfo.address,
		  					"addressAreaId1": this.AddresseeInfo.addressAreaId1,
		  					"addressAreaId2": this.AddresseeInfo.addressAreaId2,
		  					"addressAreaId3": this.AddresseeInfo.addressAreaId3,
		  					"addressAreaInfo": this.areaTitle,
		  					"addressIsDefault": 1,
		  					"addressMobile": this.AddresseeInfo.mobile,
		  					"addressRealName": this.AddresseeInfo.userName,
		  					"memberId": this.userInfo.userId
		  			 }
		  			 let url=''
	           if(this.userInfo.userId){
				       url=this.url8
			       }else{
				       url=this.url14
		         }		  			 
					   requestData(url,'POST',params).then(res=>{ 
		             this.idCard.addressId=res.data.addressId
		             this.showHt=true
						 })		  			   
	  			}
  			}  			
  		}
  		// 如果不是海淘商品 先生成地址ID 再生成订单 然后支付
  		else{
  			let params={
					"address":this.AddresseeInfo.address,
					"addressAreaId1": this.AddresseeInfo.addressAreaId1,
					"addressAreaId2": this.AddresseeInfo.addressAreaId2,
					"addressAreaId3": this.AddresseeInfo.addressAreaId3,
					"addressAreaInfo": this.areaTitle,
					"addressIsDefault": 1,
					"addressMobile": this.AddresseeInfo.mobile,
					"addressRealName": this.AddresseeInfo.userName,
					"memberId": this.userInfo.userId
  			}
  			let url=''
        if(this.userInfo.userId){
		       url=this.url8
	       }else{
		       url=this.url14
        }	  			
		    requestData(url,'POST',params).then(res=>{ 
         this.idCard.addressId=res.data.addressId
         this.creatOrderId()
			  })  			
  		}
  	},
  	// 用户填写收货地址时弹出选择区域模块
  	showArea2(){
  		this.inputActive=10
    	// 判断是否选择了规格 选择了才能弹框
    	if(this.specActive>=0){
    		this.showPopup3=false
    		this.showPopup2=false
    		this.$refs.areaPopup.showWin(2)
    	}else{
    		alert('请选择规格')
    	}  		
  	},
  	// 计算运费2（ 些许区别）
  	computerFeight2(info,areaId2,areaId1,areaId3){
       let params={
			  "areaId2": areaId2,
			  "buyNum": this.goodsInfo.buyNumber,
			  "goodsId": this.goodsInfo.goodsList[0].goodsId     	
       }
       this.AddresseeInfo.addressAreaId1=areaId1
       this.AddresseeInfo.addressAreaId2=areaId2
       this.AddresseeInfo.addressAreaId3=areaId3       
		   requestData(this.url4,'POST',params).then(res=>{ 
				 this.goodsInfo.freight=res.data.freightAmount
				 this.goodsInfo.allowSend=res.data.allowSend
				 // 这一步和之前不一样 有区别
				 this.$refs.areaPopup.bindCloseArea()
				 this.areaTitle=info
			 })	       
  	}, 
  	// 主页面弹出选择区域模块
    showArea(){
    	// 判断是否选择了规格 选择了才能弹框
    	if(this.specActive>=0){
    		this.$refs.areaPopup.showWin(1)
    	}else{
    		alert('请选择规格')
    	}
    	
    },
    // 查询订单
    searchOrder(){
    	if(!this.searchMobile){
  		  this.$toast('请输入手机号码');
  			return false
    	}
    	let params={
        "addressMobile":this.searchMobile
      }
    	requestData(this.url11,'POST',params).then(res=>{
    		 this.orderList=[]
    		 if(res.data.ordersSnList.length==0){
    		 	 alert('该手机号码下无订单')
    		 	 this.abnormal=false
    		 	 this.abnormalMessage=''
    		 }else{
	    		 for(var i=0;i<res.data.ordersSnList.length;i++){
	    		 	 let obj={
	    		 	 	text:res.data.ordersSnList[i],
	    		 	 	value:res.data.ordersSnList[i]
	    		 	 }    		 	 
	    		 	 this.orderList.push(obj)
	    		 }
	    		 // 默认选择第一项
	    		 if(this.orderList[0]){    		 	
	    		 	this.orderValue=this.orderList[0].value
	    		 	this.orderSelect=this.orderList[0].value
            this.getExpressVo(this.orderSelect)   		 	
	    		 }    		 	
    		 }

    	})
    },
    // 选择订单
    changeOrder(res){
    	this.orderSelect=res
    	this.getExpressVo(res)
    },
    // 获取物流数据
    getExpressVo(ordersSn){
    	requestData(this.url12,'POST',{"ordersSn":ordersSn}).then(result=>{
    		if(result.responseCode==100){
    			this.expressDetailVoList=[]
    			if(result.data.expressVo.expressDetailVoList){
    				if(result.data.expressVo.expressDetailVoList.length>0){
	    				this.abnormal=false
			    		this.expressDetailVoList=result.data.expressVo.expressDetailVoList
			    		this.expressActive=result.data.expressVo.expressDetailVoList.length-1				    					
    				}else{
	    				this.abnormal=true
	    				this.abnormalMessage='暂无物流数据'		    					
    				}		    				
    			}else{
    				this.abnormal=true
    				this.abnormalMessage='暂无物流数据'
    			}    			
    		}else{    			
    			this.abnormal=true
    			this.abnormalMessage=result.messageList[0].message
    		}
    	})    	
    },
    // 轮播变化时
    onChange(index) {
      this.current = index;
    },
    getRef(index){
    	return 'videoId'+index
    },
    focusAddress(num){
    	this.inputActive=num;
    	this.downActive=-1
    }
  }
}
</script>
<style lang="scss" scoped>
.selectOrder{position: fixed;top: 15px;right: 15px;z-index: 1;
   img{width: 45px;height: 45px;}
}
.downLoad.active{position: absolute;z-index: -1;}
.downLoad{bottom: 0;
	img{width: 100%;display:block;}
}
.van-steps--vertical {
    padding: 0 0 0 21px;
}
.abnormal{text-align: center;padding: 60px;color: #999;}
.ht{
	.ht_title{font-weight: bold;font-size: 18px;}
	.container{padding: 0 15px;}
	.u_1{font-size: 12px;color: #10B992;padding: 10px 0;}
	.u_2{display: flex;align-items: center;padding: 12px 0;
	   .font1{width: 60px;font-size: 14px;color: #333;}
	   .input{flex: 1;
	     input{width: 100%;border:none;font-size: 14px;color: #333;}
	   }
	}
	.u_3{padding-top: 12px;.font1{font-size: 14px;}}
	.u_4{margin-top: 14px;display: flex;justify-content: space-between;
	   .uploader{border:1px dashed #ccc;padding:1px;width: 48%;
	      .defaultImg{width: 100%;display: block;height: 100px;}
	   }
	}
	.u_5{margin-top:14px;display: flex;justify-content: space-between;
	   div{width: 48%;text-align: center;font-size: 14px;color: #999;}
	}
	.action{margin-top: 60px;button{border-radius: 43px;}}
  
}


.t{padding: 10px 15px;
   .header{display:flex;justify-content: space-between;
   	img{width: 20px;height: 20px;display: block;}
   } 
    .t_1{margin-top: 13px;font-size: 20px;font-weight: bold;}  
    .t_2{margin-top: 8px;}
    .yqm{padding: 15px 6px;color: #10B992;border-bottom: 1px solid #e9e9e9;}
    .xy{text-align: center;font-size: 14px;margin-top: 20px;
       .radio{width: 14px;height: 14px;border-radius: 50%;display: inline-block;border:1px solid #ccc;
       vertical-align: -2px;margin-right: 5px;position: relative;
         .point{width: 8px;height: 8px;background: #ccc;position: absolute;top: 0px;left: 0px;bottom: 0;right:0;margin: auto;}
         .point.active{background: #10B992;}
       }
       .radio.active{border:1px solid #10B992;}
    }
    .inputWrap2{display: flex;border-bottom: 1px solid #e9e9e9;padding: 15px 6px;position: relative;align-items: center;justify-content: space-between;
       .input2{width: 50%;border:none;color: #333;font-size: 16px;}
       .yzm{color: #10B992;}
    }    
	  .inputWrap{border-bottom: 1px solid #e9e9e9;padding: 15px 6px;position: relative;
	      .clear{position: absolute;top: 19px;right: 8px;width: 16px;height: 16px;}	      
	  }
	  .t_3{display: flex;justify-content: space-between;padding: 15px 6px 15px;border-bottom: 1px solid #e9e9e9;align-items: center;}
	  .font2{color: #10B992;font-size: 13px;}
	  .inputWrap.active{border-bottom: 1px solid #10B992;}   
	  .inputWrap2.active{border-bottom: 1px solid #10B992;} 
	  .input{width: 90%;border:none;color: #333;font-size: 16px;}
	  .search{border-radius: 66px;padding: 6px 20px;background: #10B992;color: #fff;position: absolute;right: 8px;top: 8px}
	  .point{width:11px;height: 11px;border-radius: 50%;background: #CCC;display: inline-block;}
	  .point.active{background: #10B992;}
		input::-webkit-input-placeholder{
		    color:#CCCCCC;
		}
		input::-moz-placeholder{
		    color:#CCCCCC;
		}
		input:-moz-placeholder{
		    color:#CCCCCC;
		}
		input:-ms-input-placeholder{
		    color:#CCCCCC;
		}	  
		.tips{font-size: 12px;color: #999;padding: 10px 0 20px;}
		.buyBtn{border-radius: 43px;}
		.registerBtn{border-radius: 43px;margin-top: 20px;}
}


*{box-sizing: border-box;}
.swiper img{width: 100%;display: block;height: 360px;}
.custom-indicator {
	color: #fff;
	font-size: 14px;
  position: absolute;
  right: 15px;
  bottom: 15px;
  padding: 4px 12px;
  font-size: 12px;
  background: rgba(0,0,0,.7);
  border-radius: 30px;
}
.z{position: absolute;background: url(../../../static/image/38.png);bottom: 0;left: 0;padding: 5px 15px;color: #fff;font-size: 13px;border-radius: 0 6px 0 0;}
.a{padding: 15px 13.5px;display: flex;justify-content: space-between;align-items: center;
   .a_1{display: flex;align-items: baseline;
      .a_1_1{
   	      .red{color: #FF3B30;font-weight: bold;}
   	      .red.active{font-size: 20px;}
   	    }
   	  .a_1_2{text-decoration: line-through;font-size: 14px;color: #999;margin-left: 10px;}  
   	   }
   .a_2{font-size: 12px;color: #999;}
}

.b{padding: 0 15px;
   .tag{background: #59D46A;color: #fff;font-size: 12px;padding: 4px 6px;border-radius: 4px;vertical-align: 3px;}
   .title{font-size: 14px;font-weight: bold;margin-left: 4px;line-height: 2.0;}
   .ms{padding: 15px 0;font-size: 13px;color: #999;}
}

.c{height: 10px;background: #faf7fa;}
.d{padding-left: 15px;
  .d_1{padding: 15px 0;border-bottom:1px solid #E9E9E9;display: flex;align-items: center;
     .d_1_2{margin-left: 15px;flex: 1;}
  }
  .font1{color: #999;font-weight: 500;font-size: 13px;width: 40px;padding-top: 2px;}
  .font2{color: #666;font-size: 13px;}
  .font3{margin-left: 10px;font-size: 13px;color: #10B992;}
  .bg{color: #fff;font-size: 12px;padding: 2px 7px;border-radius: 20px;}
  .bg1{background: #FB713B;img{width: 14px;height: 14px;margin-right: 3px;vertical-align: -2px;}}
  .bg2{background: #FFB430;margin-left: 5px;img{width: 14px;height: 14px;margin-right: 3px;vertical-align: -2px;}}
  .bg3{background:rgba(251,113,59,.2);font-size: 12px;color: #FB713B;padding: 4px 5px;border-radius: 3px;}
  .bg4{background:rgba(255,231,231,1);font-size: 12px;color: #FF3B30;padding: 4px 5px;border-radius: 3px;}
  .isLink{padding-right: 15px;}
}
.coupon_wrap{position: relative;
  .coupon{position: absolute;height: 100%;width: 100%;left: 0;top: 0;padding: 6px 0 6px 18px;display: flex;}
  .option_wrap{flex: 1;display: flex;flex-wrap: wrap;overflow: hidden;
  	.option{padding: 4px 8px;color: #fff;font-size: 12px;font-weight: 500;border: 1px solid #fff;margin-right: 10px;border-radius: 5px;}
  }
  .receive{width: 55px;background: #FFB430;border-radius: 11px 0 0 11px;color: #fff;margin-left: 10px;display: flex;align-items: center;justify-content: flex-end;
  padding: 5px 7px;font-size: 12px;
     img{width: 5px;margin-left: 5px;}
  }

}


.specsWrap{padding: 15px 15px 0;position: relative;
    .close{position: absolute;right: 15px;top:5px;}
    .header{display:flex;
    	.hImg{width: 100px;height: 100px;}
    	.r{padding-left: 15px;padding-top: 10px;flex: 1;
    	  .font1{font-size: 14px;color: #333;font-weight: bold;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}
    	  .r_1{display: flex;justify-content: space-between;margin-top: 4px;align-items: center;
    	     .font2{font-size:16px;color: #FF3B30;font-weight: bold;}
    	     .font3{font-size:12px;color: #999;}
    	  }
    	  .r_2{display: flex;margin-top: 4px;
    	    .bg{color: #fff;font-size: 12px;padding: 2px 7px;border-radius: 20px;}
				  .bg1{background: #FB713B;img{width: 14px;height: 14px;margin-right: 3px;vertical-align: -2px;}}
				  .bg2{background: #FFB430;margin-left: 5px;img{width: 14px;height: 14px;margin-right: 3px;vertical-align: -2px;}}
    	  }
    	  .r_3{font-size: 12px;color: #999;margin-top: 5px;}
    	}
    }
    .guige{margin-top: 20px;
       .font1{font-size: 14px;color: #333;margin-bottom: 12px;}
       .wrap{display: flex;flex-wrap: wrap;
         .font2{background: #F8F8F8;font-size: 12px;padding: 5px 10px;margin-right: 12px;border-radius: 20px;margin-bottom: 10px;}
         .font2.active{background: #10B992;color: #fff;}
         .font2.active2{background: rgba(240,240,240,.9)!important;color: #ccc;}
       }
    }
    .number{display: flex;justify-content: space-between;margin-top: 25px;
    border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;padding: 15px 0;}
    .action{
    	position: fixed;left: 0;bottom: 25px;padding: 0px 25px;width: 100%;
    	img{width: 120px;height: 40px;display: block;}
    }
}

.e{padding: 15px 15px 15px 0;display: flex;align-items: center;border-bottom:1px solid #e9e9e9 ;
 .e_1{img{width: 42px;height: 42px;display: block;}}
 .e_2{flex: 1;margin-left: 15px;
    .font1{font-size: 15px;color: #333;}
    .font2{font-size: 13px;color: #999;margin-top: 6px;}
 }
}

.f{padding: 15px;display: flex;align-items: center;
  .f_1{display: flex;align-items: center;flex:1;
    .word{font-size: 12px;color: #666;}
    img{width: 14px;height: 14px;margin-right: 8px;}
  }
}
.g{padding: 15px 0 0 15px;
    .wrap{display: flex;justify-content: space-between;font-weight: 500;border-bottom: 1px solid #e9e9e9;padding-bottom: 15px;}
   .g_1{font-size: 15px;color: #333;}
   .g_2{color: #10B992;font-size: 13px;display: flex;align-items: center;padding-right: 15px;}
}
.h{padding: 15px 0 0 15px;
   .wrap{padding-bottom: 15px;border-bottom: 1px solid #e9e9e9;padding-right: 15px;}
   .wrap.active{border-bottom:none}
   .h_1{display: flex;
   	img{width: 35px;height: 35px;border-radius: 50%;}
   	.m{margin-left: 10px;flex: 1;
   	  .font1{font-size: 14px;color: #333;font-weight: 500;}
   	  .font2{font-size: 12px;color: #999;font-weight: 500;}
   	}
   }
   .h_2{font-size: 12px;margin-top: 11px;color: #333;}
   .h_3{margin-top: 15px;display: flex;flex-wrap: wrap;
     .section{margin-bottom:10px;width: 32%;margin-right: 2%;position: relative;
       .sectionImg{width: 100%;height: 110px;display: block;}
       video{width: 100%;height: 110px;display: block;}
     }
     .playMask{position: absolute;background: rgba(0,0,0,.5);width: 100%;height: 100%;top: 0;left: 0;}
     .play{position: absolute;width: 30px;height: 30px;left: 50%;margin-left: -15px;top: 50%;margin-top: -15px;}
     .section:nth-child(3n){margin-right: 0;}  
   }
}

.i{ text-align: center;padding: 15px 0;color: #999;font-size: 15px;margin-bottom: 50px;}

.j{position: fixed;bottom: 0;left: 0;padding: 6px 15px;height: 50px;width: 100%;
border-top: 1px solid #e9e9e9;display: flex;align-items: center;background: #fff;
   .j_1{display: flex;width:45%;padding-right:5%;
      .item{flex: 1;justify-content: center;display: flex;flex-direction: column;align-items: center;}
      img{width: 20px;height: 20px;display: block;}
      .word{font-size: 12px;color: #666;margin-top: 2px;}
   }
   .j_2{display: flex;width: 55%;img{width: 50%;height: 33px;}}
}

.k{padding:10px 15px;background:url(../../../static/image/37.png);
   .wrap{display: flex;justify-content: space-between;}
   .k_1{
   	 .font1{color: #fff;font-size: 14px;font-weight: bold;}
   	 .font2{color: #fff;font-size: 20px;font-weight: bold;}
   	 .font3{color: #fff;text-decoration: line-through;font-size: 14px;}   	
   }
   .k_2{
   	 .font4{color: #fff;font-size: 13px;margin-bottom: 7px;}
   	 .bg1{background: #fff;color: #FF5646;padding: 0 1px;font-size: 12px}   
   	 .font5{color: #fff;font-size: 12px;margin: 0 4px;}
   }
}

.q{width: 300px;height:200px;border-radius: 30px;padding: 35px 30px;
  .cancle{text-align: center;color: #999;padding: 14px 0;}
}
.s{padding: 42px 30px 0;
  .title{font-size: 20px;font-weight: bold;margin-bottom: 40px;}
  .inputWrap{border-bottom: 1px solid #fff;padding: 15px 6px;position: relative;
      .clear{position: absolute;top: 19px;right: 8px;width: 16px;height: 16px;}
      .eye{position: absolute;top: 19px;right: 8px;width: 16px;height: 16px;}
  }
  .inputWrap.active{border-bottom: 1px solid #10B992;}
  .input{width: 90%;border:none;color: #333;}
	input::-webkit-input-placeholder{
	    color:#CCCCCC;
	}
	input::-moz-placeholder{
	    color:#CCCCCC;
	}
	input:-moz-placeholder{
	    color:#CCCCCC;
	}
	input:-ms-input-placeholder{
	    color:#CCCCCC;
	} 
	.register{font-size: 14px;color: #666;margin-top: 20px;text-align: right;} 
	.login{background: #10B992;color: #fff;text-align: center;padding: 13px 0;border-radius: 30px;margin-top: 20px;}
	.direct{background: #10B992;color: #fff;text-align: center;padding: 13px 0;border-radius: 30px;margin-top: 20px;}
}

.van-popup--right.van-popup--round {
    border-radius: 20px 20px 0 0px;
}
.ht_mask{position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
</style>
